<template>
  <base-layout
    :dialogVisible="dialogVisible"
    :dialogTitle="dialogTitle"
    @dialog-close="dialogClose"
  >
    <template #searchPanel>
      <el-form
        :inline="true"
        ref="fromdata"
        :model="fromdata"
        :rules="rules"
        label-width="90px"
        label-position="right"
      >
        <el-row>
          <el-col :span="12">仓位信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item label="仓位名称:" prop="storageSiteName">
              <el-input clearable v-model="fromdata.storageSiteName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="仓位编号:" prop="storageSiteCode">
              <el-input clearable v-model="fromdata.storageSiteCode" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属门店:" prop="storeId">
              <Job-shop v-model="fromdata.storeId" placeholder="所属门店" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属仓库:" prop="storageId">
              <el-select
                clearable
                style="width: 200px"
                v-model="fromdata.storageId"
                placeholder="仓库"
              >
                <el-option
                  v-for="item in storageList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.storageName"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="仓位类别:" prop="storageSiteType" label-width="150">
              <el-select clearable v-model="fromdata.storageSiteType">
                <el-option
                  v-for="item in dict['仓位类别']"
                  :key="item.index"
                  :value="item.value"
                  :label="item.text"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="可存放数量:" prop="num">
              <el-input clearable v-model.number="fromdata.num" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="仓位状态:" prop="status">
              <el-select clearable v-model="fromdata.status">
                <el-option
                  v-for="item in dict['仓库状态']"
                  :key="item.index"
                  :value="item.value"
                  :label="item.text"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="仓位备注:" prop="remark">
              <el-input
                type="textarea"
                :rows="6"
                placeholder=""
                v-model="fromdata.remark"
                style="width: 600px"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #contentPanel>
      <el-form
        :inline="true"
        ref="fromdata1"
        :model="fromdata"
        :rules="rules"
        label-width="90px"
        label-position="right"
        class="insuranceForm"
      >
        <el-row>
          <el-col :span="12">管理人员</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item label="管理人员:" label-width="120px">
              <el-input clearable v-model="fromdata.userName" @focus="employeeFocus" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话:" prop="phone" label-width="120px">
              <el-input clearable v-model.number="fromdata.phone" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" align="right" justify="center">
            <el-button type="success" @click="saveUpdate">保存</el-button>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #dialog>
      <EmployeeTable
        @roleIdListSelectCheck="employeListSelectCheck"
        :checkList="[fromdata.manageUserName]"
      />
    </template>
  </base-layout>
</template>
<script>
import baseMixin from "@/mixins/base";
import { getDict } from "@/utils";
import {
  add,
  update,
  getFindById,
} from "@/api/after-sale/storehouseManage/positionManage";
import { findByStore } from "@/api/after-sale/storehouseManage/warehouseManage";
import EmployeeTable from "../../systemManage/store/components/EmployeeTable";
export default {
  components: {
    EmployeeTable,
  },
  mixins: [
    baseMixin({
      addData: add,
      updateData: update,
      format(res) {
        return res.map((data) => {
          return data;
        });
      },
    }),
  ],
  data() {
    return {
      fromdata: {
        id: '',
        storageSiteCode: '',
        alreadyNum: ''
      },
      rules: {},
      dialogImageUrl: "",
      imageDialogVisible: false,
      dict: [],
      storageList: [],
      rules: {
        storageSiteName: [{ required: true, message: "请输入仓位名称", trigger: "blur" }],
        storageSiteCode: [{ required: true, message: "请输入仓位编号", trigger: "blur" }],
        storageSiteType: [
          { required: true, message: "请选择仓位类别", trigger: "change" },
        ],
        storageId: [{ required: true, message: "请选择所属仓库", trigger: "blur" }],
        storeId: [{ required: true, message: "请选择所属门店", trigger: "change" }],
      },
    };
  },
  watch: {
    "fromdata.storeId": function (value) {
      if (value) {
        this.getWareHouse(value);
      }
    },
  },
  methods: {
    // 获取仓库
    async getWareHouse(id) {
      let { data } = await findByStore(id);
      this.storageList = data;
    },
    saveUpdate() {
      this.$refs["fromdata"].validate((valid) => {
        if (valid) {
          this.fromdata.alreadyNum = this.$route.query.alreadyNum
          this.handleDataUpdate(this.fromdata);
          this.closeRouter();
        }
      });
    },
    //打开员工选择列表
    employeeFocus() {
      this.handleDataInsert("管理人员列表");
    },
    //员工选择
    employeListSelectCheck(select) {
      this.fromdata.userName = select[0].userName;
      this.fromdata.phone = select[0].phone;
      this.fromdata.userId = select[0].id;
      this.dialogClose();
    },
    async detail(id) {
      let { data } = await getFindById(id);
      this.fromdata = data;
    },
  },
  mounted() {
    this.dict = getDict(["仓位类别", "仓库状态"]);
    let id = this.$route.query.id;
    if (id) {
      this.fromdata.id = id;
      this.detail(id);
    }
  },
};
</script>
<style lang="scss" scoped></style>
